<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>外边距</title>
        <style type="text/css">
            body {
                border: 1px solid gray;
            }
            .wrapper {
                margin: 15px;
            }

            .odd {
                min-height: 10px;
                border: 1px solid blue;
            }

            .even {
                background-color: #dfdfdf;
            }

            .inner {
                border: 1px solid green;
                margin: 15px;
            }

            .third>* {
                border: 1px solid red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper odd"></div>
        <div class="wrapper even">
            <div class="inner">
                首个子元素的上部外边距可能与父元素上部外边距重叠
            </div>
            <div class="inner">
                天字一号
            </div>
            <div class="inner">
                相邻的兄弟元素上下外边距默认都是重叠的
            </div>
            <div class="inner">
                天字二号
            </div>
            <div class="inner">
                末尾子元素的下边外边距可能与父元素下边外边距重叠
            </div>
        </div>
        <div class="wrapper odd third">
            <span>阿芳是个好姑娘</span>
            <b>婷婷也是好姑娘</b>
            <a href="#">王某然是个老爷们</a>
            <span>阿芳是个好姑娘</span>
            <b>婷婷也是好姑娘</b>
            <a href="#">王某然是个老爷们</a>
            <span>阿芳是个好姑娘</span>
            <b>婷婷也是好姑娘</b>
            <a href="#">王某然是个老爷们</a>
            <span>阿芳是个好姑娘</span>
            <b>婷婷也是好姑娘</b>
            <a href="#">王某然是个老爷们</a>
            <span>阿芳是个好姑娘</span>
            <b>婷婷也是好姑娘</b>
            <a href="#">王某然是个老爷们</a>
            <span>阿芳是个好姑娘</span>
            <b>婷婷也是好姑娘</b>
            <a href="#">王某然是个老爷们</a>
        </div>

        <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements">内联元素</a>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a>
    </body>
</html>